
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Mtons UI</title>

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="../../dist/css/dashboard.css" rel="stylesheet">

<link href="../../theme/default/style.css" rel="stylesheet">

<script src="../../depends/jquery.min.js"></script>
</head>

<body>
	<div class="container-fluid">

		<div class="row">
			<h2 class="sub-header">Window</h2>

			<p>窗口是一个浮动和拖拽面板,可以用作应用程序窗口。默认情况下一个窗口可以移动,调整大小和关闭。它的内容也可以为静态html或url来加载。</p>
			<div class="table-responsive">
				<table class="table table-striped" style="width: 600px;">
					<tr>
						<th>方法</th>
						<th>说明</th>
					</tr>
					<tr>
						<td>title</td>
						<td>标题文字</td>
					</tr>
					<tr>
						<td>actions</td>
						<td>工具栏按钮数组, 可以选的参数有：['toggle', 'min', 'max', 'close']</td>
					</tr>
					<tr>
						<td>width</td>
						<td>宽度, 可以是制定的数字, 也可以是 百分比</td>
					</tr>
					<tr>
						<td>height</td>
						<td>高度, 可以是制定的数字, 也可以是 百分比</td>
					</tr>
					<tr>
						<td>appendTo</td>
						<td>窗体节点追加在知道位置, 默认为 body</td>
					</tr>
					<tr>
						<td>position</td>
						<td>自定义位置, {top: 0, left: 0} 或   {right: 0, bottom: 0}</td>
					</tr>
					<tr>
						<td>modal</td>
						<td>是否使用遮罩, 默认 false</td>
					</tr>
					<tr>
						<td>visible</td>
						<td>是否立即显示, 默认 true</td>
					</tr>
					<tr>
						<td>draggable</td>
						<td>是否可以拖拽, 默认 true</td>
					</tr>
					<tr>
						<td>resizable</td>
						<td>是否可以调整大小, 默认 true</td>
					</tr>
				</table>
			</div>
			
			<div>
				<h4>示例：</h4>
				
				<div>
					<button id="open" class="but">open</button>
					
					<div id="win" style="display:none;">这是一个窗口</div>
				</div>
				<pre>
$('#open').click(function () {
	var panel = new mtons.Window({
		title : 'weibo',
		href: 'http://www.weibo.com',
		width: 800, 
		height: 600
	});
});

var a = new mtons.Window({
	content: 'hello, this is a window!',
	width: 200, 
	height: 150
});

// 通过 jQuery 的方式创建
$('#win').window({position : {left : '100px', top : '100px'}, width: 200, height: 150});
				</pre>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="../../src/core.js"></script>
	<script type="text/javascript" src="../../src/drag.js"></script>
	<script type="text/javascript" src="../../src/resize.js"></script>
	<script type="text/javascript" src="../../src/window.js"></script>
	<script type="text/javascript">
	$(function(){
		$('#open').click(function () {
			var panel = new mtons.Window({
				title : 'weibo',
				href: 'http://www.weibo.com',
				width: 800, 
				height: 600
			});
		});
		
		var a = new mtons.Window({
			content: 'hello, this is a window!',
			width: 200, 
			height: 150
		});
		
		$('#win').window({position : {left : '100px', top : '100px'}, width: 200, height: 150});
	});
	</script>

</body>
</html>
